<template>
	<div class="img-list">
		<div v-for="(item, index) in datas" :key="index" class="img-item" :style="style[index]">
			<img :src="item.pic">
		</div>
	</div>
</template>

<script>
export default {
	props: {
		datas: Array,
		height: {
			type: Number,
			default: 50
		}
	},
	data() {
		return {
			style : []
		}
	},
	watch:{
		'datas'(){
			this.upStyle()
		},
		'height'(){
			this.upStyle()
		}
	},
	mounted() {
		this.upStyle()
	},
	methods: {
		upStyle(){
			if(this.datas.length == 1){
				this.$set(this.style,0,'width:100%;padding-top:'+this.height+'%;')
			}else if(this.datas.length == 2){
				this.$set(this.style,0,'width:50%;padding-top:50%;')
				this.$set(this.style,1,'width:50%;padding-top:50%;')
			}else if(this.datas.length == 3){
				this.$set(this.style,0,'width:50%;padding-top:25%;')
				this.$set(this.style,1,'width:50%;padding-top:25%;')
				this.$set(this.style,2,'width:100%;padding-top:25%;')
			}else if(this.datas.length == 4){
				this.$set(this.style,0,'width:50%;padding-top:25%;')
				this.$set(this.style,1,'width:50%;padding-top:25%;')
				this.$set(this.style,2,'width:50%;padding-top:25%;')
				this.$set(this.style,3,'width:50%;padding-top:25%;')
			}
		}
	}
}
</script>

<style lang='less'>
	.img-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		background: #fff;
		.img-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position:relative;
			width:50%;
			height:0;
			padding-top:25%;
			img {
				position:absolute;
				top:0;
				left:0;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>